<template>
  <div class="zw_table">
    <el-table ref="multipleTableRef" row-key="id" header-row-class-name="table_header_title" stripe :data="props.tableList" class="table-box" :height="tabH" :style="{ width: '100%', height: tabH }" @selection-change="handleSelectionChange">
      <el-table-column :reserve-selection="true" type="selection" width="55" />
      <el-table-column label="标题" prop="title">
        <template #default="scope">
          {{ scope.row.title || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="海报">
        <template #default="scope">
          <el-image :preview-src-list="[scope.row.poster_url]" :preview-teleported="true" style="width: 46px; height: 61px" :src="scope.row.poster_url" fit="cover">
            <template #error>
              <div class="image-slot">
                <el-icon><icon-picture /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="下载次数">
        <template #default="scope">
          {{ scope.row.download_num || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="发送次数">
        <template #default="scope">
          {{ scope.row.send_num || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="所属分组">
        <template #default="scope">
          {{ scope.row.group_name || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="创建人">
        <template #default="scope">
          {{ scope.row.created_name || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180px">
        <template #default="scope">
          {{ scope.row.created_at || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <div class="btn-box">
            <el-button v-auth="'EDIT_PT'" size="small" @click="submitFun(scope.row, 1)">编辑</el-button>
            <el-button v-auth="'DEL_PT'" size="small" @click="submitFun(scope.row, 2)">下载</el-button>
            <el-button v-auth="'PREVIEW_PT'" size="small" @click="submitFun(scope.row, 3)">预览</el-button>
            <el-button v-auth="'DEL_PT'" size="small" @click="submitFun(scope.row, 4)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <DeletBox ref="DeletBoxRef" />
    <PreviewBox ref="PreviewBoxRef" :itemInfo="itemInfo" />
  </div>
</template>

<script setup lang="ts">
  import { batchDel, downStat } from '@/api/highMaterial/poster'
  import { ref, onMounted } from 'vue'
  import router from '@/router'
  import DeletBox from './DeletBox.vue'
  import PreviewBox from './PreviewBox.vue'
  import { downFile } from '@/utils/utils'
  import type { ElTable } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import { getSetionId, tableH, reSize } from '@/utils/utils'

  const emit = defineEmits(['selectFun', 'reload', 'delPoster'])
  const props = defineProps(['tableList', 'tableType', 'posters', 'group_id']) //tableType 当前是我的海报 还是 企业海报  0 我的海报  1 企业海报
  interface User {
    date: string
    name: string
    address: string
  }
  const DeletBoxRef = ref(null)
  const PreviewBoxRef = ref(null)
  const itemInfo = ref({}) //当前选择的数据
  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const multipleSelection = ref<User[]>([])
  const tabH = ref('500px')
  const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
    emit(
      'selectFun',
      multipleSelection.value.map((it: any) => {
        return it.id
      })
    )
  }
  // 表格的自适应高度
  const getTableH = () => {
    tabH.value = tableH('.table-box')
    console.log(1111, tabH.value)
  }

  // 删除
  const delApiFun = () => {
    batchDel({ poster_ids: itemInfo.value.id ? [itemInfo.value.id] : [], poster_type: props.tableType + 1 }).then((r: any) => {
      DeletBoxRef.value.appDialog.visible = false
      ElMessage.success('删除成功')
      emit('reload')
      emit('delPoster')
    })
  }
  // 操作按钮
  const submitFun = (val: any, type: number) => {
    switch (type) {
      case 1: //编辑
        router.push({
          path: `/content/highMaterial/poster/posterDetail`,
          query: { id: val.id, group_id: props.group_id, group_type: props.posters, type: props.tableType + 1 }
        })
        // router.push(`/content/highMaterial/poster/posterDetail?type=${props.tableType + 1}&id=${val.id}`)
        break
      case 2: //下载
        // window.open(val.poster_url)
        downStat({ poster_id: val.id }).then((res: any) => {
          ElMessage.success('下载成功')
          emit('reload')
        })
        downFile(val.poster_url, val.title + val.created_at)
        break
      case 3: //预览
        PreviewBoxRef.value.drawerData.show = true
        itemInfo.value = val
        break
      default:
        DeletBoxRef.value.appDialog.visible = true
        DeletBoxRef.value.appDialog.title = '删除提示'
        DeletBoxRef.value.appDialog.submit = delApiFun
        itemInfo.value = val
    }
  }
  //清空选中
  const clearSelection = () => {
    multipleTableRef.value!.clearSelection()
  }
  onMounted(() => {
    getTableH()
    reSize(getTableH)
  })
  defineExpose({
    getTableH,
    clearSelection
  })
</script>

<style scoped lang="scss">
  .zw_table {
    margin: 0 20px;
  }
  .btn-box {
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
    div {
      height: 24px;
      padding: 0 16px;
      line-height: 24px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #eaeaea;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #33302d;
      margin-right: 6px;
      margin-bottom: 5px;
      cursor: pointer;
      a {
        color: #33302d;
        text-decoration: none;
      }
    }
  }
</style>
